<template>
<div class="login-container">
  <div class="loginbox">
      <!-- 头像区域 -->
     <div class="avatar">
         <img src="@/assets/logo.png" alt="">
     </div>
     <!-- 登录表单区域 -->
     <el-form ref="loginFormRef" :model='loginForm' class="login_form" :rules='loginFormRules' >
         <!-- 用户名 -->
        <el-form-item label="用户名" label-width = '80px' prop="username">
            <el-input v-model='loginForm.username'
            placeholder="请输入用户名"  prefix-icon="iconfont icon-yonghuming" clearable></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="密码" label-width = '80px' prop="password">
            <el-input v-model='loginForm.password' placeholder="请输入密码" prefix-icon="iconfont icon-mima" show-password></el-input>
        </el-form-item>

        <!-- 登录重置按钮 -->
        <el-row class="login_btn">
            <el-button type="primary" size="medium" @click="login" round>登录</el-button>
            <el-button type="info" size="medium" @click="resetLoginForm" round>重置</el-button>
      </el-row>
    </el-form>
   </div>
</div>
 
</template>


<script>
export default {
    name:'login',
    data(){
        return {
            //表单数据绑定对象
            loginForm:{
                // username:'',
                // password:'',
                username:'admin',
                password:'123456'
            },
            // 表单验证规则对象
            loginFormRules:{
                // 用户名验证
                username:[
                     { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                // 密码验证
                password:[
                     { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        // 重置表单
        resetLoginForm(){
            this.$refs.loginFormRef.resetFields();
        },
        login(){
            this.$refs.loginFormRef.validate(async valid => {
              if(!valid)  return;
             const result = await this.$http.post('login',this.loginForm)
             const {data :res}=result;
            //  登录弹窗提示
             if(res.meta.status !== 200) return this.$Message.error('登录失败');
                 this.$Message.success('登录成功');
                //  登录成功token保存
                window.sessionStorage.setItem('token',res.data.token);
                this.$router.push('/home')
          })
        }
    }
}

</script>



<style lang="less" scoped>

.login-container{
    background-color:#34495e;
    height: 100%;
    position:relative;
    .loginbox{
        width: 450px;
        height: 300px;
        background-color: #fff;
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom: 0;
        margin:auto;
        .avatar{
            width: 130px;
            height: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding:10px;
            box-shadow: 0 0 10px #eee;
            background-color:#fff;
            position:absolute;
            left:50%;
            transform:translate(-50%,-50%);
            img{
                width: 100%;
                height:100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
    }
}
.login_form{
    position:absolute;
    width: 95%;
    bottom:40px;
    display:flex;
    // left:0;
    // right:0;
    // margin:0 auto;
    flex-direction: column;
    align-items: center;
    .login_btn{
        width: 100%;
        text-align: center;

    }
}
</style>